<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <!-- <TableFilter /> -->
      <ActionBar v-if="!forSelection" :belongs="belongs" :whether-arrival="whetherArrival" :types="types" />
      <AssetTable
        :columns="insideColumns"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :show-advanced-search="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
        @close-filter-item="onCloseFilterItem"
      >
        <template v-for="column in insideColumns">
          <el-table-column v-if="column.display" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </template>
      </AssetTable>
    </div>
    <FormDialog v-if="dialogFormVisible" class="fixed-dialog-height" title="编辑合同信息" :show.sync="dialogFormVisible" width="60%" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" :belongs="belongs" />
    </FormDialog>
    <ViewDialog v-if="dialogViewVisible" class="fixed-dialog-height" title="查看合同信息" :show.sync="dialogViewVisible" width="60%" @on-cancel="viewCancel">
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
// secondary package based on el-pagination
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
import ViewForm from './components/viewForm'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ActionBar from './components/actionBar'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate, isArray } from '@neu/biz-core/utils/utils'
import AssetTable from '@neu/biz-core/components/AssetTable'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { CONTRACT_TYPE } from '@neu/dcam-ui/utils/constants'
import {
  page,
  remove
} from '@neu/dcam-ui/api/contract'
export default {
  name: 'ContractPage',
  components: {
    FormDialog,
    EditForm,
    ActionBar,
    AssetTable,
    ViewDialog,
    ViewForm
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind, belongs],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    },
    whetherArrival: {
      type: Boolean,
      default: null
    },
    types: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '合同编号', width: 130, key: 'code', sortable: 'custom', display: true,
          render: (h, params) => { // 查看功能
            const biaoqian = this.forSelection === true ? 'div' : 'el-link'
            return h('span', [
              h(biaoqian, {
                class: 'font-12',
                attrs: { title: params.row.code },
                props: { type: 'primary' },
                on: { click: () => { this.forSelection === true ? {} : this.view(params.row.id) } }},
              params.row.code)
            ])
          }
        },
        { title: '合同名称', width: 400, key: 'name', display: true },
        { title: '合同类型', width: 160, key: 'type', display: true,
          render: (h, params) => {
            return h('span', CONTRACT_TYPE[params.row.type] || '')
          }
        },
        { title: '供货方名称', key: 'manufacturerName', display: true },
        { title: '签订日期', width: 160, key: 'signingDate', sortable: 'custom', display: true, render: (h, params) => { return h('span', formatDate(params.row.signingDate, 'YYYY-MM-DD')) } },
        // { title: '供货方联系人', width: 120, key: 'manufacturerContact', display: false },
        // { title: '供货方联系电话', width: 130, key: 'manufacturerTelephone', display: false },
        // { title: '供货方地址', width: 120, key: 'manufacturerAddress', display: false },
        // { title: '供货方开户行', width: 120, key: 'manufacturerBank', display: false },
        // { title: '供货方账号', width: 120, key: 'manufacturerAccount', display: false },
        // { title: '供货方税号', width: 120, key: 'manufacturerTaxId', display: false },
        { title: '邮编', width: 90, key: 'postCode', display: false },
        { title: '质量保障', width: 100, key: 'qualityAssurance', display: false },
        { title: '交货期限', width: 100, key: 'deliveryDeadline', display: true },
        { title: '运输方式', width: 100, key: 'transport', display: false },
        { title: '包装方式', width: 100, key: 'packing', display: false },
        { title: '到货地点', width: 100, key: 'arrivalAddress', display: false },
        { title: '合同金额', width: 100, key: 'amount', display: true },
        { title: '付款条件', width: 100, key: 'paymentTerms', display: false },
        { title: '付款状况', width: 100, key: 'paymentStatus', display: true,
          render: (h, params) => {
            const text = params.row.paymentStatus === true ? '已付款' : '未付款'
            return h('span', [
              h('el-tag', text)
            ])
          }
        },
        { title: '发票', width: 100, key: 'bill', display: true },
        { title: '备注', width: 200, key: 'remark', display: true }
      ],
      dialogFormVisible: false,
      dialogViewVisible: false,
      editId: -1,
      searchObj: {
        s_belongs: this.belongs
      }
    }
  },
  created: function() {
    console.log('belongs=')
    console.log(this.belongs)
    // 拉取列表数据
    this.searchObj.s_belongs = this.belongs
    this.searchObj.s_whetherArrival = this.whetherArrival
    if (this.types) {
      this.searchObj.s_types = this.types
    }
    this.filter(this.searchObj)
  },
  methods: {
    onCloseFilterItem(item) {
      this.$refs.filterForm.onFilterItemClose(item)
    },
    // 表格编辑按钮点击事件处理
    edit(selections) {
      if (isArray(selections)) {
        if (selections.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择操作数据！'
          })
          return
        }
        if (selections.length > 1) {
          this.$message({
            type: 'warning',
            message: '只能选择一条数据！'
          })
          return
        }
        // 更新当前被编辑实体的ID，自动传递至编辑表单
        this.editId = selections[0].id
        // 打开对话框
        this.dialogFormVisible = true
      }
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.reset()
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    },
    view(id) {
      // 打开对话框
      this.editId = id
      this.dialogViewVisible = true
    }
  }
}
</script>
